<!--
* @description 
* @fileName index.vue
* @author yanghong
* @date 2021/01/11 15:25:55
!-->
<template>
  <div class="alarmCountRank-container">
      <div class="flex-container">
        <div class="flex-item box-sale-bar">
            <div class="title">
                {{$t('alarmCount.title')}}
                <el-radio-group v-model="dateType" @change="initRankChart" size="mini" class="pull-right">
                    <el-radio-button label="day">{{$t('day')}}</el-radio-button>
                    <el-radio-button label="week">{{$t('week')}}</el-radio-button>
                    <el-radio-button label="month">{{$t('month')}}</el-radio-button>
                    <el-radio-button label="season">{{$t('season')}}</el-radio-button>
                    <el-radio-button label="year">{{$t('year')}}</el-radio-button>
                </el-radio-group>
            </div>
            <div id="rankChart" :style="{width: '100%', height: '400px'}"></div>
        </div>
        </div>
  </div>
</template>

<script>
import '@/utils/index.js'
let echarts = require('echarts/lib/echarts');
export default {
  data () {
    return {
      dateType:'day',
      currentTime:this.$options.filters['dateFormat'](new Date()),
      rankChart:{}
    }
  },

  computed: {

  },
  mounted(){
      this.rankChart= echarts.init(document.getElementById('rankChart'));
      this.initRankChart('day')
  },
  methods: {
    async initRankChart(_dateType){
        this.dateType=_dateType;
        let res = await this.API.alarmShowAlarmCount({
            timeType: this.dateType,
            currentTime: this.currentTime
        })
        let xAxisData=[],seriesData=[]
        res.forEach(item => {
            xAxisData.push(item.inverterSn)
            seriesData.push(item.count)
        });
        let optionObj={
                tooltip:{
                },
                xAxis:{
                    data : xAxisData
                },
                yAxis:{
                    name:this.$t('deviceTypeAlarmCount.ci-count')
                },
                grid :{
                    left : '20px',
                    top : '45px',
                    right : '25px',
                    bottom : '20px',
                    containLabel :true
                },
                series : [this.EchartsUtil.getSeries({type:'bar',data:seriesData})]
            };
        this.rankChart.setOption(this.EchartsUtil.getOption(optionObj));
    }
  }
}

</script>
<style lang='less'>
@color_box_bg:#EFEFEF;
@color_title:#444;
@border_radius:3px;
@border_bottom:1px dashed #D1D1D1;
.alarmCountRank-container{
    .flex-item{
      margin: 10px;
      flex:1 1 25%;
      background:@color_box_bg;
      border-radius: @border_radius;
      box-shadow: 4px 4px 5px rgba(0,0,0,.1);
      .title{
        padding: 10px;
        border-bottom: @border_bottom;
        color: @color_title;
      }
    }
}
</style>